<template>
	<u-popup :show="showPop" @close="showPop=false" mode="center" :customStyle="{'background-color':'transparent'}">
		<view class="content">
		     
			<view class="title">
				已生成高清海报
			</view>
			
			
			<image class="posterImg" :src="activityInfo.canvasImg" mode="" :show-menu-by-longpress="true"></image>
			
			<text class="tip">长按海报图片选择分享好友或保存图片</text>
			
			<view class="copywritingBox">
				<view class="writeTitleBox" v-if="totalCount>0">
					<text class="text1">智能文案推荐</text>
					<text class="text2" @click="changeRecommend">换一条（{{currentIndex+1}}/{{totalCount}}）</text>
				</view>
				<view class="remind" v-if="totalCount>0">
					{{recommendContent}}
				</view>
				<view class="remind">
					{{wxUrl}}
				</view>
			</view>
			
			
			<view class="btnBox">
				<view class="btn" @click="close">
					关闭
				</view>
				<view class="btn" @click="copyContent">
					一键复制文案
				</view>
			</view>
			
			
	
		</view>
	
	</u-popup>
</template>

<script>
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';
	import {
		saveImg,
		qrcodeCanvas
	} from '@/uni_modules/fan-canvas/plugins/utils';
	export default {
		name: '',
		data() {
			return {
				currentIndex : 0,
			    wxUrl : 'https://wxaurl.cn/YTzyFbJIGtr'
			}
		},
		props: {
			showPop : {
				type :Boolean,
				default :false
			},
			activityInfo:{
				type : Object
               
			}
		},
		computed:{
			totalCount() {
				return this.activityInfo.copywritingList?.length;
			},
			recommendContent() {
				if (this.totalCount>0) {
					return this.activityInfo.copywritingList[this.currentIndex];
				}else {
					return '';
				}
				
			}
		},
		
		mounted() {
		},
		methods: {
			changeRecommend() {
				if(this.totalCount == this.currentIndex+1) {//当切换到最大值时
					this.currentIndex=0;
				}else {
					this.currentIndex++;
				}
			},
			// 保存图片
			async onSaveImg() {
				let imgUrl = "";
				if (this.activityInfo.canvasImg) {
					imgUrl = await this.activityInfo.canvasImg;
					saveImg(imgUrl)
				}
			},
           close() {
			   this.$emit('close')
		   },
		   copyContent() {
			   uni.setClipboardData({
			   	data: this.recommendContent + this.wxUrl,
			   	success: function () {
			   		console.log('success');
			   	}
			   });
		   }
		}
		
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			color: #ffffff;
			
		}
		.posterImg {
			margin-top: 20rpx;
			width: 377rpx;
			height: 605rpx;
		}
		.copywritingBox {
			width: 80%;
			margin: 48rpx 80rpx 0;
			.writeTitleBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.text1 {
					font-size: 34rpx;
					font-weight: bold;
					color: #ffffff;
				}
				.text2 {
					font-size: 22rpx;
					font-weight: bold;
					color: #fff;
				}
				
			}
			.remind {
				margin-top: 20rpx;
				font-size: 22rpx;
				font-weight: bold;
				color: #ffffff;
			}
		}
	}
	
	.tip {
		margin-top: 20rpx;
		font-size: 22rpx;
		font-weight: bold;
		color: #fff;
	}
	
	.btnBox {
		display: flex;
		justify-content: space-between;
		.btn {
			margin-right: 20rpx;
			margin-top: 50rpx;
			width: 300rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			border: 1rpx solid #fff1da;
			border-radius: 40rpx;
			color: #fff1da;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
	

	
</style>